<!DOCTYPE html>
<html>
    <head>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <p>
            Tests that width MQ feature is correct on zoom.
        </p>
        <script>
            // testRunner.zoomPageOut/In zooms with a fixed factor of 1.2 instead
            // of the zoom levels of the actual browser.

            function test() {
                var minWidth = window.innerWidth - 1;
                var maxWidth = window.innerWidth + 1;
                shouldBeTrue("window.matchMedia('(min-width: " + minWidth + "px)').matches");
                shouldBeTrue("window.matchMedia('(max-width: " + maxWidth + "px)').matches");
            }

            if (window.testRunner) {
                for (var i = 0; i < 5; i++) {
                    testRunner.zoomPageOut();
                    test();
                }

                for (var i = 0; i < 10; i++) {
                    testRunner.zoomPageIn();
                    test();
                }
            }
        </script>
    </body>
</html>
